<template>
  <div id="wrapper">
    <HeaderFour></HeaderFour>
    <div id="brandCenter">
      <img src="../../assets/shortProduct/productBrand/bigImg.png" alt="">
      <img src="../../assets/shortProduct/productDetail/brandlogo.png" alt="">
      <div id="brand-name">
        <p>{{brand}}</p>
        <span>来自英国</span>
      </div>
    </div>
    <div id="brandDetail">
      <p id="brandContent">{{brandContentSlice}}</p>
      <p><img src="../../assets/shortProduct/productBrand/angle.png" alt="" @click="brandContentAll()" :class="isAll ? brandCenterControlAll : brandCenterControl"></p>
    </div>
    <div class="tian-f-two"></div>
    <ul>
      <li>全部商品</li>
      <li class="parent" v-for="obj in goods">
        <div class="left"><img :src="obj.img" alt=""></div>
        <div class="right">
          <p>{{obj.name}}</p>
          <p>我应经好几天不能眠,都是为了谁</p>
          <div class="right-bottom">
            <img :src="obj.addressImg" alt="">
            <img src="../../assets/shopCar/plane.png" alt="">
            <span class="address">{{obj.brand}}</span>
            <span class="price">¥ {{obj.price}}</span>
          </div>
        </div>
        <div class="tian-f-three"></div>
      </li>
    </ul>
  </div>
</template>
<script>
  import Vue from 'vue'
  import HeaderFour from '../shortProduct/HeaderFour.vue'
  export default {
    data(){

      return {
        brandContent: '这是品牌介绍这是品牌介绍这是品牌介绍这是品牌介绍这是品牌介绍这是品牌介绍这是品牌介绍这是品牌介绍这是品牌介绍这是品牌介绍这是品牌介绍这是品牌介绍这是品牌介绍这是品牌介绍这是品牌介绍这是品牌介绍这是品牌介绍这是品牌介绍这是品牌介绍这是品牌介绍这是品牌介绍这是品牌介绍这是品牌介绍这是品牌介绍',
        brandContentSlice: '',
        isAll: false,
        brandCenterControl:'brandCenterControl',
        brandCenterControlAll: 'brandCenterControlAll',
        goods:[],
        goodsAll:[],
        sw: false,
        brand: ''
      }
    },
    components:{
      HeaderFour
    },
    computed:{
      getBrandName(){
        return this.$route.params.brandName;
      }
    },
    created() {
      // 缓存指针
      let _this = this;
      // 设置一个开关来避免重负请求数据
      let sw = 0;
      // 注册scroll事件并监听
      this.brandContentSlice = this.brandContent.slice(0,50) + '...';
      Vue.axios.get("/goods/brand",{params:{brand: this.getBrandName}}).then((res)=>{
            this.goods = res.data.slice(0,4);
            this.brand = res.data[0].brand;
            window.addEventListener('touchmove',function(){
//          console.log(this); window
              // console.log(document.documentElement.clientHeight+'-----------'+window.innerHeight); // 可视区域高度
              // console.log(document.body.scrollTop); // 滚动高度
              // console.log(document.body.offsetHeight); // 文档高度
              // 判断是否滚动到底部
              let height = (document.documentElement.scrollTop + window.innerHeight) / 20;
//        console.log(document.documentElement.scrollTop);
//        console.log("aaa",height);
              let nHeight = document.documentElement.offsetHeight / 20;
//        console.log("SSS",nHeight);
              if(height >= nHeight) {
            sw = sw + 4;
              // ...延展
                _this.goods.push(...res.data.slice(sw,sw + 4));

          }
        });

      });



    },
    mounted() {

    },
    methods:{
      brandContentAll() {
        this.isAll = !this.isAll;
        if(this.isAll) {
          this.brandContentSlice = this.brandContent;
        } else {
          this.brandContentSlice = this.brandContent.slice(0,50) + '...';
        }
      }
    }
  }
</script>
<style scoped>
  #wrapper{
    width:100%;
  }
  #brandCenter{
    position: relative;
   padding-bottom: 4.5rem;
    border-bottom: 1px solid #cccccc;
  }
  #brandCenter img:nth-child(1){
    width: 100%;
  }
  #brandCenter img:nth-child(2){
    display: inline-block;
    width: 5rem;
    position: absolute;
    top:13rem;
    left: 1rem;
  }
  #brand-name{
    position: absolute;
    top:15rem;
    left: 7rem;
  }
  #brand-name p{
    font-size: 1.4rem;
    color: #cccccc;
   }
  #brand-name span{
    font-size: 1rem;
    color: #4d4d4d;
  }
  #brandDetail{
    padding-top: 0.5rem;
  }
  #brandDetail p:nth-child(2){
    text-align: center;
  }
  .brandCenterControl{
    width: 1rem;
    transform: rotate(-180deg);
    transition: all 1s;
  }
  .brandCenterControlAll{
    width: 1rem;
    transform: rotate(0deg);
    transition: all 1s;
  }
  .tian-f-two{
    width: 100%;
    height: 1.5rem;
    background-color: rgb(242,242,242);
  }
  .parent{
    position: relative;
    width: 100%;
    height: 10rem;
  }
  .left, .right{
    position: absolute;
    height: 10rem;
  }
  .left{
    text-align: center;
    left: 0;
    width: 30%;
  }
  .left img{
    margin-top: 1.5rem;
    height: 7.5rem;
  }
  .right{
    width: 69%;
    right: 0;
  }

  .right p:nth-child(1){
    font-size: 1.5rem;
    margin-top: 1.5rem;
    color: #333333;
  }
  .right p:nth-child(2){
    font-size: 1.2rem;
    margin-top: 1rem;
    color: #4d4d4d;
  }
  .right-bottom{
    margin-top: 1.3rem;
    position: relative;
  }
  .right-bottom img{
    width: 1.5rem;
    vertical-align: middle;
  }
  .address{
    font-size: 1.2rem;
    color: #4d4d4d;
    vertical-align: middle;
    margin-left: 0.5rem;
  }
  .price{
    font-size: 1.5rem;
    color: #e53e42;
    vertical-align: middle;
   position: absolute;
    right: 2rem;
  }
  .tian-f-three{
    position: absolute;
    top:10rem;
    width: 100%;
    height: 1.5rem;
    background-color: rgb(242,242,242);
  }
</style>
